<template>
  <div class="Collection">
    <navBar :title="title"></navBar>
    <div class="list-title">
      <span class="list-title-left">
        <span class="col-icon">
          <img src="/img/52.png" alt>
        </span>
        <span>立即配送</span>
      </span>
      <span>共3种</span>
    </div>
    <ul class="myCollectionList">
      <li class="myCollectionList_item" v-for="(item, index) in myCollectionList" :key="index">
        <div class="myCollectionList_item_img">
          <img width="100%" :src="item.img" alt>
        </div>
        <div class="myCollectionList_item_info">
          <div class="myCollectionList_item_name">{{item.name}}</div>
          <div class="specifications">规格: {{item.specifications}}g</div>
          <div class="status" v-if="item.status">预定</div>
          <div class="unit_price">
            <span class="price">{{item.unitPrice}}</span>
            <span class="unit">/份</span>
          </div>
          <div class="stepper">
            <!-- <img class="stepper_img" src="/img/38.png" @click="reduct(index)"> -->
            <span class="input_num">X {{item.num}}</span>
            <!-- <img class="stepper_img" src="/img/56.png" @click="add(index)"> -->
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import { Icon } from "vant";
Vue.use(Icon);
export default {
  name: "Collection",
  data() {
    return {
      title: "商品清单",
      myCollectionList: [
        {
          img: "/img/60.png",
          name: "金香玉蜜薯 900-1000g",
          specifications: "300",
          unitPrice: "¥29.9",
          status: 1,
          num: 2
        },
        {
          img: "/img/60.png",
          name: "金香玉蜜薯 900-1000g",
          specifications: "600",
          unitPrice: "¥29.9",
          status: 0,
          num: 2
        },
        {
          img: "/img/60.png",
          name: "金香玉蜜薯 900-1000g",
          specifications: "500",
          unitPrice: "¥29.9",
          status: 0,
          num: 2
        }
      ]
    };
  },
  components: {
    navBar
  },
  methods: {
    reduct(index) {
      const num = this.myCollectionList[index].num;
      num > 0 && this.myCollectionList[index].num--;
    },
    add(index) {
      this.myCollectionList[index].num++;
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" scoped >
.Collection {
  padding-top: 50px;
  .list-title {
    display: flex;
    justify-content: space-between;
    height: 45px;
    line-height: 44px;
    background-color: #fff;
    padding: 0px 15px;
    box-sizing: border-box;
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 48, 48, 1);
    border-bottom: 1px solid rgba(248, 248, 248, 1);
    &-left {
      .col-icon {
        img {
          height: 32px;
          vertical-align: middle;
        }
      }
    }
  }
  .myCollectionList {
    padding-top: 9px;
    padding-left: 20px;
    .myCollectionList_item {
      position: relative;
      height: 107px;
      border-bottom: 1px solid #ededed;
      background-color: #fff;
      &:last-child {
        border-bottom: 1px solid transparent;
      }
      .myCollectionList_item_img,
      .myCollectionList_item_info {
        float: left;
      }
      .myCollectionList_item_img {
        width: 82px;
        height: 82px;
        border: 1px solid rgba(233, 233, 233, 1);
        margin-top: 13px;
        margin-right: 35px;
      }
      .myCollectionList_item_info {
        .myCollectionList_item_name {
          margin-top: 11px;
          font-size: 14px;
          font-family: PingFangSC-Medium;
          font-weight: 700;
          color: rgba(48, 48, 48, 1);
        }
        .specifications {
          font-size: 11px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
        .status {
          position: absolute;
          top: 50px;
          width: 34px;
          height: 14px;
          line-height: 14px;
          background: linear-gradient(
            137deg,
            rgba(254, 102, 118, 1) 0%,
            rgba(244, 138, 152, 1) 100%
          );
          border-radius: 0px 7px 0px 7px;
          font-size: 9px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          text-align: center;
        }
        .unit_price {
          margin-top: 32px;
          font-size: 11px;
          font-family: PingFangSC-Medium;
          font-weight: 700;
          color: rgba(225, 52, 52, 1);
          .unit {
            font-size: 9px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
          }
        }
        .stepper {
          position: absolute;
          top: 73px;
          right: 34px;
          display: flex;
          .stepper_img {
            width: 28px;
            height: 22px;
          }
          .input_num {
            display: inline-block;
            padding: 4px 9px 3px 12px;
            font-size: 11px;
            color: rgba(48, 48, 48, 1);
          }
        }
      }
    }
  }
}
</style>
